<script setup lang="ts">
import { reactive, watch } from 'vue';

const user = reactive({
  name: '张三',
  info: {
    gender: '男',
    age: 18,
    address: '北京市',
    city: '朝阳区'
  }
})

// watch(user,()=>{
//   console.log('user.name被修改了')
// })

// 侦听对象属性值，改写成箭头函数返回属性值的写法
watch(()=>user.info.age,()=>{
  console.log('user.info.age被修改了')
})

// 通过参数3：开启深度侦听{deep：true}
watch(()=>user.info.city,()=>{
  console.log('user.info.age被修改了')
},{deep:true})
</script>


<template>
  <p>{{ user }}</p>
  <button @click="user.name = '李肆'">点击改名</button>
  <button @click="user.info.age++">点击年龄+1</button>
</template>


